<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu default-active="0" class="el-menu-vertical-demo">
        <el-menu-item v-for="(item, index) in routes[0]?.children" :key="item.path" :index="`${index}`"
          @click="handleClick(item.path)">
          <!-- <el-icon><icon-menu /></el-icon> -->
          <span>{{ item.menu }}</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { routes } from '@/router/index'
import { useRouter } from 'vue-router'
const router = useRouter()

const handleClick = (path: string) => {
  router.push(path)
}
</script>

<style scoped>
.tac{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}

.el-menu-vertical-demo {
  width: 100%;
  background-color: transparent;
}
</style>